<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-02 18:28:16
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 10:04:15
-->
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Insert title here</title>
		<style type="text/css">
			input[type=button] {
				width: 200px;
			}
		</style>
		<script type="text/javascript">
			// 点击按钮修改 背景 

			//点击中国红 背景红色
			// 点击 绿野星踪 背景变成绿色
			// 点击蓝色妖姬 背景变成蓝色

			//提示 
			// 先获取三个按钮  
			window.onload = function(){
				var red = document.getElementById('red');
				var green = document.getElementById('green');
				var blue= document.getElementById('blue');

			var color = 'white';
			// 鼠标点击  onclick  鼠标点击 背景变成自己行内的背景色 
				red.onclick = function(){
					document.body.style.background = red.style.background;
				}
			// 鼠标移出  onmouseout   鼠标移出 背景变成白色 
				red.onmouseout = function(){
					document.body.style.background = color;
				}

				green.onclick = function(){
					document.body.style.background = green.style.background;
				}
			// 鼠标移出  onmouseout   鼠标移出 背景变成白色 
				green.onmouseout = function(){
					document.body.style.background = color;
				}

				blue.onclick = function(){
					document.body.style.background = blue.style.background;
				}
			// 鼠标移出  onmouseout   鼠标移出 背景变成白色 
				blue.onmouseout = function(){
					document.body.style.background = color;
				}

			}

		</script>
    </head>
    <body>
    	<center>
	    	<input type="button" value="中国红" style="background:#FF0000;" id="red">
	    	<input type="button" value="绿野星踪" style="background:#00FF00;" id="green">
	    	<input type="button" value="蓝色妖姬" style="background:#0000FF;" id="blue">
		</center>
    </body>
</html>
